import { NavLink } from "react-router-dom";

// 定义一个高亮函数，用于根据是否激活来返回不同的类名
const highlight = ({ isActive }) => (isActive ? "selected" : "");

export default function Navigation() {
  return (
    <div>
      {/* 使用 NavLink 组件进行路由导航，根据路由的激活状态动态添加类名以实现高亮效果 */}
      <NavLink className={highlight} to="/">
        首页 {/* 导航链接到首页 */}
      </NavLink>
      <NavLink className={highlight} to="/topic" preventScrollReset={true}>
        专题 {/* 导航链接到专题页面，preventScrollReset={true} 防止跳转时重置滚动位置 */}
      </NavLink>
      <NavLink className={highlight} to="/news">
        新闻 {/* 导航链接到新闻页面 */}
      </NavLink>
    </div>
  );
}
